$(function () {
  // 1.1 获取裁剪区域的 DOM 元素
  var $image = $("#image");
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".img-preview",
  };
  // 1.3 创建裁剪区域
  $image.cropper(options);

  // 1.选择图片;2.渲染图片;3.上传图片
  $("#chooseImageBtn").on("click", function () {
    $("#chooseImageInp").click();
  });

  let layer = layui.layer;
  $("#chooseImageInp").on("change", function (e) {
    console.log(e.target.files);
    // 获取文件对象
    const file = this.files[0];
    // 非空校验
    if (file === undefined) {
      return layer.msg("请选择上传头像图片!");
    }
    // 基于文件对象,创建一个临时路径
    const url = URL.createObjectURL(file);
    console.log(url);
    // 给浏览器图片区域赋值
    $image.cropper("destroy").attr("src", url).cropper(options);
  });

  $("#uploadBtn").on("click", function () {
    let dataURL = $image
      .cropper("getCroppedCanvas", {
        width: 100,
        height: 100,
      })
      .toDataURL("image/png");
    axios({
      url: "/my/update/avatar",
      method: "post",
      data: "avatar=" + encodeURIComponent(dataURL),
    }).then((res) => {
      //成功回调
      console.log(res);
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message);
      }
      layui.layer.msg("更改用户头像成功!");
      window.parent.getUserInfo();
    });
  });
});
